<template>
  <svg
    t="1631534883489"
    class="call-icon"
    viewBox="0 0 1024 1024"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    p-id="9214"
    :width="size"
    :height="size"
    :style="{ cursor }"
    @click.stop.prevent="call"
  >
    <path
      d="M716.8 938.666667c-10.666667 0-19.2-2.133333-29.866667-4.266667-108.8-38.4-258.133333-102.4-356.266666-198.4C234.666667 637.866667 170.666667 488.533333 132.266667 379.733333c-8.533333-29.866667-4.266667-59.733333 12.8-83.2 17.066667-25.6 46.933333-40.533333 78.933333-40.533333h100.266667c21.333333 0 42.666667 12.8 53.333333 32l46.933333 85.333333c10.666667 17.066667 10.666667 38.4 2.133334 55.466667l-42.666667 85.333333c4.266667 17.066667 21.333333 66.133333 61.866667 106.666667s89.6 57.6 106.666666 61.866667l85.333334-42.666667c17.066667-8.533333 38.4-8.533333 55.466666 2.133333l87.466667 49.066667c19.2 10.666667 32 29.866667 32 53.333333v100.266667c0 32-14.933333 61.866667-40.533333 78.933333-17.066667 8.533333-36.266667 14.933333-55.466667 14.933334zM224 298.666667c-17.066667 0-34.133333 8.533333-44.8 21.333333-8.533333 12.8-10.666667 29.866667-6.4 44.8C209.066667 469.333333 268.8 612.266667 360.533333 704c91.733333 91.733333 234.666667 153.6 339.2 187.733333 14.933333 4.266667 32 2.133333 44.8-6.4 14.933333-10.666667 21.333333-25.6 21.333334-44.8v-100.266666c0-6.4-4.266667-12.8-8.533334-14.933334l-87.466666-49.066666c-4.266667-2.133333-10.666667-2.133333-17.066667 0L563.2 725.333333c-4.266667 2.133333-8.533333 2.133333-12.8 2.133334-2.133333 0-74.666667-14.933333-136.533333-74.666667-59.733333-59.733333-74.666667-132.266667-74.666667-136.533333 0-4.266667 0-8.533333 2.133333-12.8l46.933334-91.733334c2.133333-4.266667 2.133333-10.666667 0-17.066666l-46.933334-85.333334c-2.133333-6.4-8.533333-8.533333-14.933333-8.533333h-102.4zM774.4 341.333333H533.333333c-12.8 0-21.333333-8.533333-21.333333-21.333333V106.666667c0-12.8 8.533333-21.333333 21.333333-21.333334h241.066667c12.8 0 21.333333 8.533333 21.333333 21.333334v32l70.4-29.866667c6.4-2.133333 14.933333-2.133333 19.2 2.133333s10.666667 10.666667 10.666667 17.066667v170.666667c0 6.4-4.266667 12.8-8.533333 17.066666s-12.8 4.266667-19.2 2.133334l-70.4-29.866667V320c-2.133333 12.8-12.8 21.333333-23.466667 21.333333zM554.666667 298.666667h198.4v-42.666667c0-6.4 4.266667-12.8 8.533333-17.066667 6.4-4.266667 12.8-4.266667 19.2-2.133333l70.4 29.866667v-106.666667l-70.4 29.866667c-4.266667 4.266667-12.8 2.133333-19.2-2.133334-6.4-4.266667-8.533333-10.666667-8.533333-17.066666V128H554.666667v170.666667z"
      p-id="9215"
      :fill="color"
    ></path>
  </svg>
</template>

<script>
import { showVideoConferencingDialog } from './index.js';

export default {
  name: 'call-center-line',
  props: {
    size: { type: [Number, String], default: 21 },
    color: { type: String, default: '#76b3ff' },
    cursor: { type: String, default: 'pointer' },
    click: { type: Function, default: undefined },
  },
  methods: {
    call() {
      if (typeof this.click === 'function') {
        this.click(this.$attrs);
      } else {
        showVideoConferencingDialog();
      }
    },
  },
};
</script>

<style>
.call-icon {
  padding: 3px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  cursor: pointer;
}
</style>
